<template>
  <div class="echarts-outer-wrapper width-1250">
    <Title title="纳税人构成"></Title>
    <div class="chart-container flex1">
      <div class="chart-container-zhs">
        <div class="chart-container-zhs-bg"></div>
        <div class="chart-container-zhs-content">
          <div class="chart-container-zhs-content-value">
            241.7<span class="chart-container-zhs-content-value-unit"
              >万户</span
            >
          </div>
          <div class="chart-container-zhs-content-name">本年有效管户</div>
        </div>
      </div>
      <div class="chart">
        <echartCompt class="echarts-chart" v-model="chartOption" />
      </div>
      <!-- 底座背景 -->
      <div class="bg"></div>
    </div>
  </div>
</template>

<script>
import Title from "@/components/title";
import * as echarts from "echarts";

import "echarts-gl";
import { getPie3D, getParametricEquation } from "./pieChart";
const color = ["rgb(64,109,252)", "rgb(194,159,116)", "rgb(34,203,188)"];

export default {
  name: "nsrgc",
  components: {
    Title,
  },
  data() {
    return {
      prevDate: "",
      yearDate: "",
      optionData: [
        { name: "单位纳税人", value: 2017100 },
        { name: "个体工商户", value: 356200 },
        { name: "临时税务登记", value: 13700 },
      ],
      statusChart: null,
      option: {},
    };
  },
  created() {
    let date = "";
    let month = new Date().getMonth() + 1;
    let year = new Date().getFullYear();
    date = year + "-" + month;
    this.prevDate = date;
    this.yearDate = year;
  },
  computed: {
    chartOption() {
      this.optionData.forEach((item, index) => {
        item.itemStyle = {
          color: color[index],
        };
        item.label = {
          normal: {
            show: true,
            position: "outside",
            color: color[index],
            formatter: ["{d|{d}%}"].join("\n"), // 用\n来换行
            rich: {
              d: {
                color: "#FFF",
                align: "left",
                fontSize: 18,
              },
            },
          },
        };
        item.labelLine = {
          show: true,
          length: 80,
          length2: 30,
          lineStyle: {
            color: color[index],
            width: 2,
          },
        };
      });
      // 传入数据生成 option, 构建3d饼状图, 参数工具文件已经备注的很详细 第二个参数传0就是饼图
      this.option = getPie3D(this.optionData, 0, 320, 50, 42, 15, 0.8);
      // 是否需要label指引线，如果要就添加一个透明的2d饼状图并调整角度使得labelLine和3d的饼状图对齐，并再次setOption
      this.option.series.push({
        name: "税务状态", //自己根据场景修改
        backgroundColor: "transparent",
        type: "pie",
        label: {
          opacity: 1,
          fontSize: 18,
          lineHeight: 20,
        },
        startAngle: -40, // 起始角度，支持范围[0, 360]。
        clockwise: false, // 饼图的扇区是否是顺时针排布。上述这两项配置主要是为了对齐3d的样式
        radius: ["20%", "45%"],
        center: ["42%", "50%"],
        data: this.optionData,
        itemStyle: {
          opacity: 0, //这里必须是0，不然2d的图会覆盖在表面
        },
      });

      return this.option;
    },
  },
  mounted() {},
  methods: {},
};
</script>

<style scoped lang="scss">
.echarts-outer-wrapper {
  width: 936px;
  height: calc((1080px - 62px - 28px) / 2);
}
.chart-container {
  position: relative;
  width: 100%;
  height: calc(100% - 54px);
  &-zhs {
    position: absolute;
    width: 250px;
    height: 90px;
    right: 20px;
    top: 100px;
    font-size: 22px;
    color: #fff;
    display: flex;
    &-bg {
      height: 84px;
      width: 92px;
      background: url("~@/assets/images/icon-15.png") no-repeat;
      background-size: 100% 100%;
    }
    &-content {
      width: 168px;
      height: 90px;
      color: rgb(159, 229, 255);
      &-value {
        height: 45px;
        line-height: 45px;
        font-weight: bold;
        &-unit {
          font-size: 16px;
        }
      }
      &-name {
        height: 45px;
        line-height: 45px;
        color: #fff;
      }
    }
  }
}

.chart,
.bg {
  position: relative;
  z-index: 99;
  width: 100%;
  height: 100%;
}
.echarts-chart {
  width: 100%;
  height: 100%;
  bottom: 10%;
}

.bg {
  position: absolute;
  bottom: 100px;
  left: 130px;
  z-index: 1;
  width: 500px;
  height: 96px;
  background: url("~@/assets/images/bg-3d-1.png") no-repeat;
  background-size: 100% 100%;
}
</style>
